<route lang="json5" type="page">
{
  layout: 'theme', // 使用主题
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="login-container">
    <!-- 背景 -->
    <view class="header-bg" />

    <!-- 标题 -->
    <view class="login-header">
      <text class="login-title">欢迎登录花支优品</text>
    </view>

    <!-- 表单区域 -->
    <view class="login-form">
      <!-- 手机号输入区域 -->
      <view class="form-input-wrapper">
        <view class="form-prefix">
          <text class="country-code">+86</text>
        </view>
        <input
          v-model="phone"
          class="form-input pl-20rpx"
          type="number"
          placeholder="请输入手机号"
          :maxlength="11"
          placeholderStyle="color: #999"
        />
        <view v-if="phone" class="clear-icon" @tap="clearPhone">
          <text class="clear-text">×</text>
        </view>
      </view>

      <!-- 验证码输入区域 -->
      <view class="code-area">
        <view class="form-input-wrapper code-input-wrapper">
          <input
            v-model="verifyCode"
            class="form-input"
            type="number"
            placeholder="请输入验证码"
            :maxlength="6"
            placeholderStyle="color: #999"
          />
        </view>
        <view class="verify-btn" :class="[codeSending ? 'verify-btn-disabled' : '']" @tap="sendCode">
          <text>{{ countdown > 0 ? `${countdown}S后重新获取` : '获取验证码' }}</text>
        </view>
      </view>

      <!-- 隐私协议区域 -->
      <view class="privacy-area">
        <wd-checkbox v-model="privacyAgreed" shape="circle" checked-color="#ff5050" />
        <text class="privacy-text">
          已阅读并同意
          <text class="privacy-link" @tap="openUserAgreement">《用户协议》</text>
          及
          <text class="privacy-link" @tap="openPrivacyPolicy">《隐私政策》</text>
        </text>
      </view>

      <!-- 登录按钮 -->
      <view class="login-btn" :class="[!canLogin ? 'login-btn-disabled' : '']" @tap="handleLogin">
        <text class="login-btn-text">登录</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'

// 表单数据
const phone = ref('')
const verifyCode = ref('')
const countdown = ref(0)
const codeSending = ref(false)
const isBack = ref(false)
const privacyAgreed = ref(false)

// 计算属性
const isPhoneValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(phone.value)
})

const canLogin = computed(() => {
  return isPhoneValid.value && verifyCode.value.length === 6 && privacyAgreed.value
})

// 清除手机号
function clearPhone() {
  phone.value = ''
}

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 方法
function sendCode() {
  // 验证手机号
  if (!phone.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }

  if (!isPhoneValid.value) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  if (codeSending.value) return

  codeSending.value = true
  countdown.value = 60
  isBack.value = true // 模拟已发送验证码的状态，显示返回按钮

  // 模拟发送验证码
  console.log('发送验证码到：', phone.value)

  uni.showToast({
    title: '验证码发送成功',
    icon: 'none'
  })

  // 模拟验证码填充，方便演示
  setTimeout(() => {
    verifyCode.value = '234908'
  }, 500)

  // 倒计时
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      codeSending.value = false
    }
  }, 1000)
}

function handleLogin() {
  // 验证手机号
  if (!phone.value) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }

  if (!isPhoneValid.value) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  // 验证验证码
  if (!verifyCode.value) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
    return
  }

  if (verifyCode.value.length !== 6) {
    uni.showToast({
      title: '请输入6位验证码',
      icon: 'none'
    })
    return
  }

  // 验证协议
  if (!privacyAgreed.value) {
    uni.showToast({
      title: '请阅读并同意相关协议',
      icon: 'none'
    })
    return
  }

  // 模拟登录请求
  console.log('登录信息：', {
    phone: phone.value,
    verifyCode: verifyCode.value
  })

  // TODO: 发送登录请求
  uni.showToast({
    title: '登录成功',
    icon: 'success'
  })
}

function openUserAgreement() {
  // 打开用户协议页面
  uni.navigateTo({
    url: '/pages/agreement/user'
  })
}

function openPrivacyPolicy() {
  // 打开隐私政策页面
  uni.navigateTo({
    url: '/pages/agreement/privacy'
  })
}

// 调试用：设置模拟数据
function setDebugData() {
  // 取消此注释可以直接模拟已填写状态
  // phone.value = '17789026530'
  // verifyCode.value = '234908'
  // isBack.value = true
  privacyAgreed.value = true // 默认勾选协议
}

onMounted(() => {
  setDebugData()
})
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 0;
  background-color: #fff;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 624rpx;
  background-image: url('/static/images/login/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.login-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150rpx;
  padding-bottom: 100rpx;
}

.login-title {
  font-size: 40rpx;
  font-weight: 500;
  color: #fff;
  letter-spacing: 2rpx;
}

.login-form {
  position: relative;
  z-index: 1;
  margin: 0 60rpx;
}

.form-input-wrapper {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background-color: #f8f8f8;
  border-radius: 50rpx;
}

.form-prefix {
  width: 60rpx;
  margin-right: 10rpx;
}

.country-code {
  font-size: 28rpx;
  color: #333;
}

.form-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  color: #999;
  background-color: #ddd;
  border-radius: 50%;
}

.clear-text {
  font-size: 24rpx;
  line-height: 1;
}

.code-area {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.code-input-wrapper {
  flex: 1;
  margin-right: 20rpx;
  margin-bottom: 0;
}

.verify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 100rpx;
  font-size: 26rpx;
  color: #fff;
  background-color: #ff5050;
  border-radius: 50rpx;
}

.verify-btn-disabled {
  background-color: #ccc;
}

.privacy-area {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 60rpx;
}

.privacy-text {
  margin-left: 10rpx;
  font-size: 26rpx;
  color: #666;
}

.privacy-link {
  color: #ff5050;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  margin-bottom: 50rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #ff5050;
  border-radius: 50rpx;
}

.login-btn-disabled {
  background-color: #ffb3b3;
}

.login-btn-text {
  font-weight: 500;
}
</style>
